<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>订单详情 - 三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f2f5;
        }
        .phone-frame {
            width: 375px;
            height: 812px;
            background: #000;
            border-radius: 40px;
            padding: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }
        .phone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 32px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .content-area {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 80px;
        }
        .content-area::-webkit-scrollbar {
            width: 4px;
        }
        .content-area::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .content-area::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 2px;
        }
        .bottom-nav {
            height: 64px;
            background: white;
            border-top: 1px solid #e5e7eb;
            margin: 0 12px;
            border-radius: 0 0 32px 32px;
        }
        .order-type-tag {
            padding: 1px 6px;
            background: #EFF6FF;
            border-radius: 3px;
            font-size: 11px;
            color: #3B82F6;
            margin-right: 6px;
        }
        .order-type-tag.rank { background: #eff6ff; color: #2563eb; }
        .order-type-tag.practice { background: #f0fdf4; color: #22c55e; }
        .order-type-tag.other { background: #f3f4f6; color: #6b7280; }
        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .info-label {
            color: #6B7280;
            font-size: 14px;
        }
        .info-value {
            color: #1F2937;
            font-size: 14px;
            text-align: right;
        }
        .price-value {
            color: #EF4444;
            font-weight: bold;
        }
        .section-title {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            color: #1F2937;
            margin-bottom: 12px;
        }
        .section-title i {
            margin-right: 8px;
        }
        .order-status-badge {
            padding: 1px 6px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 999px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            background: #f3f4f6;
            color: #2563eb;
        }
        .status-wait { background: #f3f4f6; color: #2563eb; }
        .status-doing { background: #eff6ff; color: #2563eb; }
        .status-confirm { background: #fef9c3; color: #f59e42; }
        .status-done { background: #dcfce7; color: #22c55e; }
        .status-cancel { background: #f3f4f6; color: #9ca3af; }
        .status-appeal { background: #fee2e2; color: #ef4444; }
        /* 代练师信息卡片样式 */
        .coach-card {
            background: white;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .coach-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .coach-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            border: 1px solid #e5e7eb;
            flex-shrink: 0;
        }
        .coach-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .coach-info {
            flex: 1;
            min-width: 0;
        }
        .coach-name {
            font-size: 15px;
            font-weight: 500;
            color: #1f2937;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .coach-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
            color: #6b7280;
        }
        .coach-stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .coach-stat-item i {
            color: #9ca3af;
            font-size: 12px;
            flex-shrink: 0;
        }
        .coach-stat-item span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .coach-contact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #f3f4f6;
        }
        .coach-phone {
            font-size: 14px;
            color: #1f2937;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 8px;
        }
        .call-button {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            background: #2563eb;
            color: white;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .call-button:hover {
            background: #1d4ed8;
        }
        .call-button:active {
            transform: scale(0.98);
        }
        .call-button i {
            font-size: 12px;
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <!-- 返回按钮 -->
                <div class="flex-shrink-0 flex items-center z-10">
                    <button class="p-2 -ml-2 focus:outline-none">
                        <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                </div>
                <!-- 标题居中 -->
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">订单详情</span>
                </div>
                <!-- 右侧椭圆形内容 -->
                <div class="flex-shrink-0 flex items-center ml-auto z-10" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center cursor-pointer" title="更多">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容区域 -->
            <div class="content-area">
                <div class="p-4">
                    <!-- 顶部价格和类型标签区 -->
                    <div class="flex items-start justify-between mb-1">
                        <div class="text-2xl font-bold text-red-500">¥100.0</div>
                        <div class="flex items-center gap-2">
                            <span class="order-type-tag rank">排位</span>
                            <span class="order-status-badge status-doing">进行中</span>
                        </div>
                    </div>
                    <!-- 订单标题 -->
                    <div class="text-xl font-bold text-black text-left mb-2 leading-tight">代练青铜到黄金，要求24小时内完成，效率保证</div>
                    <div class="border-b border-gray-100 mb-2"></div>
                    <!-- 三大关键信息横向卡片 -->
                    <div class="grid grid-cols-3 gap-2 mb-3">
                        <div class="rounded-lg bg-orange-50 flex flex-col items-center justify-center py-3">
                            <div class="text-lg font-bold text-orange-500">¥50.0</div>
                            <div class="text-xs text-gray-500 mt-1">安全保证金</div>
                        </div>
                        <div class="rounded-lg bg-green-50 flex flex-col items-center justify-center py-3">
                            <div class="text-lg font-bold text-green-500">¥50.0</div>
                            <div class="text-xs text-gray-500 mt-1">效率保证金</div>
                        </div>
                        <div class="rounded-lg bg-blue-50 flex flex-col items-center justify-center py-3">
                            <div class="text-lg font-bold text-blue-500">24小时</div>
                            <div class="text-xs text-gray-500 mt-1">代练时限</div>
                        </div>
                    </div>
                    <!-- 订单详细信息卡片 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex flex-col gap-1 text-sm text-gray-700">
                            <div><span class="font-medium text-gray-500">区服：</span>安卓-QQ - 默认服</div>
                            <div><span class="font-medium text-gray-500">段位要求：</span>青铜Ⅲ → 黄金Ⅰ</div>
                        </div>
                    </div>
                    <!-- 基本信息卡片 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-clipboard-list text-blue-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">基本信息</span>
                        </div>
                        <div class="flex flex-col gap-2 text-sm">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">订单号</span>
                                <span class="flex items-center">
                                    <span id="order-id" class="text-gray-700" style="user-select:all;">202406010001</span>
                                    <button id="copy-order-id" class="ml-2 text-gray-400 hover:text-blue-500 focus:outline-none" title="复制订单号">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                            <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
                                        </svg>
                                    </button>
                                </span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">接单时间</span>
                                <span class="text-gray-700">2024-06-01 12:30</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">发单时间</span>
                                <span class="text-gray-700">2024-06-01 12:00</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">发单人</span>
                                <span class="text-gray-700">小明</span>
                            </div>
                        </div>
                    </div>
                    <!-- 账号信息卡片 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-user-shield text-blue-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">账号信息</span>
                        </div>
                        <div class="flex flex-col gap-2 text-sm">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">游戏账号</span>
                                <span class="text-gray-700">123456789</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">游戏密码</span>
                                <span class="text-gray-700">123456</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">游戏角色名</span>
                                <span class="text-gray-700">三角洲战士</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">号主手机</span>
                                <span class="text-gray-700">13812345678</span>
                            </div>
                        </div>
                    </div>
                    <!-- 特别说明栏 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-info-circle text-yellow-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">特别说明</span>
                        </div>
                        <div class="text-sm text-gray-700">
                            这里是发单时填写的特别说明内容。
                        </div>
                    </div>
                    <!-- 代练师信息卡片 -->
                    <div class="bg-white rounded-xl p-4 shadow-sm mb-2">
                        <div class="flex items-center mb-3">
                            <i class="fas fa-user-tie text-blue-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">代练师</span>
                        </div>
                        <div class="flex items-center gap-3 mb-2">
                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=王者代练&backgroundColor=b6e3f4" alt="代练师头像" class="w-10 h-10 rounded-full border border-gray-200">
                            <span class="font-semibold text-gray-900 text-base">王者代练</span>
                            <span class="ml-2 px-2 py-0.5 bg-yellow-400 text-white text-xs rounded-full font-semibold">黄金</span>
                        </div>
                        <div class="flex flex-col gap-2 text-sm">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">完成订单</span>
                                <span class="text-gray-700 font-medium">128</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">接单时间</span>
                                <span class="text-gray-700 font-medium">2024-06-01 12:30</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">联系电话</span>
                                <span class="flex items-center gap-2">
                                    <span class="text-gray-700 font-mono">13812345678</span>
                                    <a href="tel:13812345678" class="px-2 py-1 bg-blue-500 text-white rounded text-xs flex items-center gap-1 hover:bg-blue-600 transition-colors">
                                        <i class="fas fa-phone-alt"></i>拨打
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部操作栏 -->
            <div class="bg-white border-t border-gray-200 px-4 py-3">
                <div class="flex items-center justify-end">
                    <button id="cancel-order-btn" class="bg-red-500 text-white px-8 py-2 rounded-full text-sm font-medium hover:bg-red-600 transition-colors">
                        取消订单
                    </button>
                </div>
            </div>
            <!-- 申请取消订单弹窗 -->
            <div id="cancel-apply-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" style="display:none;">
                <div class="bg-white rounded-xl shadow-lg w-80 max-w-[90vw] p-6 flex flex-col items-center">
                    <div class="text-lg font-bold text-gray-900 mb-3">申请取消订单</div>
                    <div class="text-gray-700 text-sm mb-4 w-full text-left leading-relaxed">
                        <div class="mb-1">代练师已开始代练，订单无法直接取消。</div>
                        <div class="mb-1">如需取消，请先与代练师协商退款金额。</div>
                        <div>协商一致后，您可在平台发起取消申请，待代练师同意后，平台将退款并取消订单。</div>
                    </div>
                    <div class="flex w-full gap-3 mt-2">
                        <button id="cancel-apply-btn" class="flex-1 py-2 bg-blue-500 text-white rounded-full text-base font-medium hover:bg-blue-600 transition-colors">发起申请</button>
                        <button id="cancel-apply-close" class="flex-1 py-2 bg-gray-200 text-gray-700 rounded-full text-base font-medium hover:bg-gray-300 transition-colors">我再想想</button>
                    </div>
                </div>
            </div>
            <!-- 微信小程序风格弹窗：扫码添加客户微信 -->
            <div id="wechat-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" style="display:none;">
                <div class="bg-white rounded-xl shadow-lg w-72 p-5 flex flex-col items-center">
                    <div class="text-lg font-bold text-gray-900 mb-2">扫码添加客户微信</div>
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=weixin://wxid_xxxxxxx" alt="微信二维码" class="w-36 h-36 rounded mb-3 border border-gray-200">
                    <button id="wechat-modal-close" class="w-full mt-2 py-2 bg-blue-500 text-white rounded-full text-base font-medium hover:bg-blue-600 transition-colors">我知道了</button>
                </div>
            </div>
            <!-- 取消订单申请弹窗 -->
            <div id="refund-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" style="display:none;">
                <div class="bg-white rounded-xl shadow-lg w-80 max-w-[90vw] p-6 flex flex-col items-center">
                    <div class="text-lg font-bold text-gray-900 mb-3">取消订单申请</div>
                    <textarea id="refund-reason" class="w-full h-20 px-3 py-2 text-sm border border-gray-200 rounded-lg mb-3 resize-none focus:outline-none focus:border-blue-500" placeholder="请输入退款原因（必填）" required></textarea>
                    <div class="w-full mb-1">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-700 text-sm">退款比例</span>
                            <span id="refund-percent" class="text-blue-600 text-sm font-bold">100%</span>
                        </div>
                        <input id="refund-range" type="range" min="0" max="100" value="100" step="1" class="w-full accent-blue-500">
                    </div>
                    <div class="w-full flex flex-col gap-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">订单金额</span>
                            <span id="order-amount" class="text-gray-900 font-bold">¥100.00</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">退款金额</span>
                            <span id="refund-amount" class="text-blue-600 font-bold">¥100.00</span>
                        </div>
                    </div>
                    <div class="w-full flex gap-3">
                        <button id="refund-submit-btn" class="flex-1 py-2 bg-blue-500 text-white rounded-full text-base font-medium hover:bg-blue-600 transition-colors">提交申请</button>
                        <button id="refund-cancel-btn" class="flex-1 py-2 bg-gray-200 text-gray-700 rounded-full text-base font-medium hover:bg-gray-300 transition-colors">放弃申请</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Toast提示 -->
    <div id="toast" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-70 text-white px-4 py-2 rounded-lg text-sm z-50" style="display: none;">
        请输入退款原因
    </div>
    <script>
    // 订单号复制功能
    document.addEventListener('DOMContentLoaded', function() {
        var copyBtn = document.getElementById('copy-order-id');
        var orderIdSpan = document.getElementById('order-id');
        if(copyBtn && orderIdSpan) {
            copyBtn.onclick = function() {
                var text = orderIdSpan.innerText.replace('订单号：', '').trim();
                navigator.clipboard.writeText(text).then(function() {
                    copyBtn.title = '已复制';
                    copyBtn.classList.add('text-green-500');
                    setTimeout(function(){
                        copyBtn.title = '复制订单号';
                        copyBtn.classList.remove('text-green-500');
                    }, 2000);
                });
            };
        }
    });
    // 客服弹窗逻辑
    document.addEventListener('DOMContentLoaded', function() {
        var contactBtn = document.getElementById('contact-service-btn');
        var wechatModal = document.getElementById('wechat-modal');
        var wechatModalClose = document.getElementById('wechat-modal-close');
        if(contactBtn && wechatModal && wechatModalClose) {
            contactBtn.onclick = function() {
                wechatModal.style.display = 'flex';
            };
            wechatModalClose.onclick = function() {
                wechatModal.style.display = 'none';
            };
        }
    });
    // 申请取消订单弹窗逻辑
    document.addEventListener('DOMContentLoaded', function() {
        var cancelBtn = document.getElementById('cancel-order-btn');
        var modal = document.getElementById('cancel-apply-modal');
        var closeBtn = document.getElementById('cancel-apply-close');
        var applyBtn = document.getElementById('cancel-apply-btn');
        var refundModal = document.getElementById('refund-modal');
        var refundRange = document.getElementById('refund-range');
        var refundPercent = document.getElementById('refund-percent');
        var orderAmount = document.getElementById('order-amount');
        var refundAmount = document.getElementById('refund-amount');
        var refundSubmit = document.getElementById('refund-submit-btn');
        var refundCancel = document.getElementById('refund-cancel-btn');
        var refundReason = document.getElementById('refund-reason');
        // 假设订单金额为100
        var orderPrice = 100.00;

        if(cancelBtn && modal && closeBtn && applyBtn) {
            cancelBtn.onclick = function() {
                modal.style.display = 'flex';
            };
            closeBtn.onclick = function() {
                modal.style.display = 'none';
            };
            applyBtn.onclick = function() {
                modal.style.display = 'none';
                refundModal.style.display = 'flex';
                refundRange.value = 100;
                refundPercent.innerText = '100%';
                orderAmount.innerText = '¥' + orderPrice.toFixed(2);
                refundAmount.innerText = '¥' + orderPrice.toFixed(2);
                refundReason.value = ''; // 清空退款原因
            };
        }

        if(refundRange && refundPercent && orderAmount && refundAmount && refundSubmit && refundCancel) {
            refundRange.oninput = function() {
                var percent = parseInt(refundRange.value, 10);
                refundPercent.innerText = percent + '%';
                var refund = orderPrice * percent / 100;
                refundAmount.innerText = '¥' + refund.toFixed(2);
            };
            refundSubmit.onclick = function() {
                const reason = refundReason.value.trim();
                if (!reason) {
                    const toast = document.getElementById('toast');
                    toast.style.display = 'block';
                    setTimeout(() => {
                        toast.style.display = 'none';
                    }, 2000);
                    return;
                }
                refundModal.style.display = 'none';
                // 这里可补充提交申请的后续逻辑
            };
            refundCancel.onclick = function() {
                refundModal.style.display = 'none';
            };
        }
    });
    </script>
</body>
</html> 